<template>
	<view class="pages">
		<view class="top">
			<view>姓名</view>
			<view>张三</view>
		</view>
		<view class="top">
			<view>身份证号码</view>
			<view>40365236541232563</view>
		</view>
		<view class="top">
			<view>手机号</view>
			<view>18893039203</view>
		</view>
		<view class="top">
			<view>店名</view>
			<view>店小友</view>
		</view>
		<view class="top">
			<view>工商营业执照号码</view>
			<view>4252336467474764646</view>
		</view>
		<view class="top">
			<view>经营区域</view>
			<view>焦作市山阳区</view>
		</view>
		<view class="top">
			<view>地址</view>
			<view>山阳区迎宾路32号</view>
		</view>
		
		<view class="introduce">商家介绍 :</view>
		<view class="introduceDetail">{{value}}</view>
		
		<view class="introduce">营业执照 :</view>
		<image src="../../static/bg.png" class="pic"></image>
		<view class="introduce">门面照片 :</view>
		<image src="../../static/bg.png" class="pic"></image>
		<view class="introduce">身份证正反面 :</view>
		<image src="../../static/bg.png" class="pic"></image>
		<image src="../../static/bg.png" class="picRight"></image>
		
		<navigator class="btn" url="/pages/business/editBusiness/editBusiness">修改商户资料</navigator>
		
		<view class="dirver"></view>
		<view class="time">
			<view class="onTime">营业时间</view>
			<view class="beginTime">
				<view>开始时间:</view>
				<view>{{startTime}}</view>
			</view>
			<view class="overTime">
				<view>结束时间:</view>
				<view>{{endTime}}</view>
			</view>
		</view>
		<button class="button-item" @click="pickerAction0">修改营业时间</button>
		<hbxw-time-range-picker 
		    :value="values0" 
		    :visible="showPicker0" 
		    @change="pickerChange0"
		    @cancel="pickerCancel0"
		    @sure="pickerSure0"
		/>
		
		
		<view class="dirver"></view>
		<view>
			<view class="onTime">店铺状态</view>
			<view class="beginTime">
				<view>状态:</view>
				<view>{{state}}</view>
			</view>
		</view>
		<button class="btn" @click="changeState">修改店铺状态</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				"value":'商家介绍商家介绍商家介绍商家介绍商家介绍商家介绍商家介绍商家介绍商家介绍商家介绍商家介绍',
				'state': '正常营业',
				showPicker0: false,
				result: null,
				values0: '08时00分00秒-18时00分00秒',
				startTime:'',
				endTime:'',
			}
		},
		methods: {
			changeState() {
				if(this.state == '正常营业'){
					uni.showModal({
					        title: '确认操作',
					        content: '确定要修改店铺状态为暂停营业吗？',
					        success: (res) => {
					          if (res.confirm) {
					            // 用户点击确定
					            this.state = '暂停营业';
					            console.log('店铺状态已修改为：', this.state);
					            // 这里可以添加其他逻辑，比如发送请求到服务器更新状态
					          } else if (res.cancel) {
					            // 用户点击取消
					            console.log('用户点击取消');
					          }
					        }
					      });
				}else{
					uni.showModal({
					        title: '确认操作',
					        content: '确定要修改店铺状态为正常营业吗？',
					        success: (res) => {
					          if (res.confirm) {
					            // 用户点击确定
					            this.state = '正常营业';
					            console.log('店铺状态已修改为：', this.state);
					            // 这里可以添加其他逻辑，比如发送请求到服务器更新状态
					          } else if (res.cancel) {
					            // 用户点击取消
					            console.log('用户点击取消');
					          }
					        }
					      });
				}
			      console.log('店铺状态已修改为：', this.state);
			      // 这里可以添加其他逻辑，比如发送请求到服务器更新状态
			    },
				pickerAction0() {
				    this.showPicker0 = true;
				},
				pickerCancel0() {
				    this.showPicker0 = false;
				},
				pickerSure0(result) {
				    console.log('---- pickerSure0 ----:', result);
				    this.result = result;
					this.values0 = result.valuesStr0;
					this.splitTime();
				    this.showPicker0 = false;
				},
				pickerChange0(result) {
				    console.log('---- pickerChange0 ----:', result);
				    this.result = result;
				},
				splitTime() {
				     // 使用split方法根据"-"分割字符串
				     const timeParts = this.values0.split('-');
				     if (timeParts.length === 2) {
				       this.startTime = timeParts[0].trim(); // 去除可能存在的空格并赋值给startTime
				       this.endTime = timeParts[1].trim(); // 去除可能存在的空格并赋值给endTime
				     }
				   }
		},
		mounted() {
		    // 组件挂载完成后执行分割字符串的方法
		    this.splitTime();
		  }
	}
</script>

<style>
	.pages{
		width: 375px;
		height: 1180px;
		background-color: rgba(255,255,255,1);
	}
	.top{
		width: 324px;
		height: 44px;
		display: flex;
		margin-left: 18px;
		line-height: 44px;
		font-size: 14px;
		border-bottom: 1rpx solid #EBEBEB;
	}
	.top view:nth-child(1){
		width: 130px;
		height: 44px;
		padding-left: 5px;

	}
	.top view:nth-child(2){
		width: 198px;
		height: 44px;
		padding-left: 5px;
	}
	.introduce {
		margin-top: 15px;
		margin-left: 23px;
		font-size: 15px;
		color: rgba(16,16,16,1);
	}
	.introduceDetail {
		width: 320px;
		height: 73px;
		border: 1px solid #EBEBEB;
		margin-left: 25px;
		margin-top: 5px;
		color: rgba(136,136,136,1);
		font-size: 14px;
	}
	.pic{
		width: 139px;
		height: 77px;
		background-color: rgba(229,229,229,1);
		margin-left: 25px;
	}
	.picRight{
		width: 139px;
		height: 77px;
		background-color: rgba(229,229,229,1);
		margin-left: 30px;
	}
	.btn{
		margin-top: 15px;
		margin-left: 75px;
		width: 200px;
		height: 38px;
		line-height: 38px;
		border-radius: 4px;
		background-color: rgba(29,111,255,1);
		color: rgba(255,255,255,1);
		font-size: 14px;
		text-align: center;
		font-family: Roboto;
	}
	 .dirver {
	    border-bottom: 1px solid #333;
	    margin: 10px 0;
		margin-top: 20px
	  }
	
	.time{
		margin-top: 1px;
	}
	.onTime {
		font-size: 18px;
		color: rgba(16,16,16,1);
	}
	.beginTime{
		margin-top: 8px;
		margin-left: 25px;
		display: flex;
		
	}
	.beginTime view:nth-child(1){
		font-size: 15px;
	}
	.beginTime view:nth-child(2){
		font-size: 15px;
		margin-left: 10px;
	}
	.overTime{
		margin-top: 5px;
		margin-left: 25px;
		display: flex;
		
	}
	.overTime view:nth-child(1){
		font-size: 15px;
	}
	.overTime view:nth-child(2){
		font-size: 15px;
		margin-left: 10px;
	}
	.button-item{
	   margin-top: 15px;
	   margin-left: 75px;
	   width: 200px;
	   height: 38px;
	   line-height: 38px;
	   border-radius: 4px;
	   background-color: rgba(29,111,255,1);
	   color: rgba(255,255,255,1);
	   font-size: 14px;
	   text-align: center;
	   font-family: Roboto;
	}
</style>
